<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <router-link to="/toUserManagement">查看企业详情 <a-icon type="right-circle"/></router-link>
      </div>
      <a-row :gutter="16">
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="本及行政区域用户数">
            <a-button-group slot="extra">
              <a-button v-for="(val, index) in typeList" :type="val.type" @click="typeListChange(val)" :key="index">{{
                val.name
              }}</a-button>
            </a-button-group>
            <rose :chartData="areaUsertNum" />
          </a-card>
          <nightingale-rose></nightingale-rose>
        </a-col>
        <a-col :span="10">
          <div class="map-box">
            <map-chart :targetArea="targetArea" @mapChange="mapChange" />
            <ul class="supplier-list">
              <li
                v-for="(item, index) in areaList"
                :key="index"
                :class="{ checked: item.checked }"
                @click="supplierClick(index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <stacked :chartData="yearUserNum" />
        </a-col>
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="煤改电用户数">
            <normal-bar></normal-bar>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="煤改气用户数">
            <normal-bar></normal-bar>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="集中供暖用户数">
            <normal-bar></normal-bar>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="其他用户数">
            <normal-bar></normal-bar>
          </a-card>
        </a-col>
      </a-row>
    </a-layout-content>
    <a-modal class="chart-modal" v-model="visible" maskClosable :closable="false" destroyOnClose>
      <div style="text-align:center;color:#fff;margin-bottom:16px;">总用户数</div>
      <num-animate :allUserNumber="allUserNumber"></num-animate>
      <normal-bar></normal-bar>
    </a-modal>
  </div>
</template>

<script>
import Rose from '@/components/CleanBaskDemo/rose'
import NightingaleRose from '@/components/CleanBaskDemo/nightingaleRose'
import MapChart from '@/components/CleanBaskDemo/map'
import Stacked from '@/components/CleanBaskDemo/stacked'
import NormalBar from '@/components/CleanBaskDemo/normalBar'
import NumAnimate from '@/components/CleanBaskDemo/numAnimate'
export default {
  name: 'UserManagement',
  components: {
    Rose,
    NightingaleRose,
    MapChart,
    Stacked,
    NormalBar,
    NumAnimate
  },
  data () {
    return {
      visible: false,
      areaList: [
        { name: '清徐县', checked: true },
        { name: '阳曲县', checked: false },
        { name: '娄烦县', checked: false },
        { name: '小店区', checked: false },
        { name: '迎泽区', checked: false },
        { name: '杏花岭区', checked: false },
        { name: '尖草坪区', checked: false },
        { name: '万柏林区', checked: false },
        { name: '晋源区', checked: false },
        { name: '古交市', checked: false }
      ],
      targetArea: '清徐县',
      typeList: [
        { name: '改造路径', type: 'primary' },
        { name: '用户类型', type: '' }
      ],
      // 设备品牌数量
      areaUsertNum: {
        data: [
          { name: '煤改气', value: 3685 },
          { name: '煤改电', value: 1456 },
          { name: '集中供热', value: 856 },
          { name: '其他', value: 1263 }
        ],
        total: 7260
      },
      // 年度用户汇总
      yearUserNum: {
        name: '历年用户数情况',
        data: [
          { num3: 407, num2: 150, num1: 107, name: '清徐县' },
          { num3: 466, num2: 300, num1: 203, name: '迎泽区' },
          { num3: 587, num2: 366, num1: 207, name: '万柏林区' },
          { num3: 769, num2: 580, num1: 303, name: '晋源区' },
          { num3: 410, num2: 288, num1: 90, name: '古交市' },
          { num3: 564, num2: 456, num1: 303, name: '杏花岭区' },
          { num3: 379, num2: 254, num1: 90, name: '小店区' }
        ]
      },
      allUserNumber: 5411 // 累计改造完成用户数
    }
  },
  methods: {
    supplierClick (index) {
      this.visible = true
      this.areaList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.targetArea = ele.name
        }
      })
    },
    mapChange (name) {
      this.visible = true
      this.areaList.forEach(ele => {
        ele.checked = false
        if (name === ele.name) {
          ele.checked = true
          this.targetArea = ele.name
        }
      })
    },
    typeListChange (val) {
      this.typeList.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '改造路径':
          this.areaUsertNum.data = [
            { name: '煤改气', value: 3685 },
            { name: '煤改电', value: 1456 },
            { name: '集中供热', value: 856 },
            { name: '其他', value: 1263 }
          ]
          return
        case '用户类型':
          this.areaUsertNum.data = [
            { name: '居民用户', value: 3685 },
            { name: '非居民用户', value: 1456 }
          ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
